<template>
<div>
  <at-collapse accordion>
    <at-collapse-item :num="test1.total" name="1" :morehref="test1.url">
      <template slot="title">恶意代码清除</template>
      <at-collapse-item-content
        v-for="(item, index) in test1.children"
        :key="index"
        :contenthref="test1.url"
        :content="item">
        {{item.info}}
      </at-collapse-item-content>
    </at-collapse-item>
    <at-collapse-item :num="test2.total" name="2" :morehref="test2.url">
      <template slot="title">漏洞修复</template>
      <at-collapse-item-content
        v-for="(item, index) in test2.children"
        :key="index"
        :contenthref="test2.url"
        :content="item">
        {{item.info}}
      </at-collapse-item-content>
    </at-collapse-item>
    <at-collapse-item :num="test3.total" name="3" :morehref="test3.url">
      <template slot="title">全网追溯</template>
      <at-collapse-item-content
        v-for="(item, index) in test3.children"
        :key="index"
        :contenthref="test3.url"
        :content="item">
        {{item.info}}
      </at-collapse-item-content>
    </at-collapse-item>
    <at-collapse-item :num="test4.total" name="4" :morehref="test4.url">
      <template slot="title">目标审计</template>
      <at-collapse-item-content
        v-for="(item, index) in test4.children"
        :key="index"
        :contenthref="test4.url"
        :content="item">
        {{item.info}}
      </at-collapse-item-content>
    </at-collapse-item>
    <at-collapse-item :num="test5.total" name="5" :morehref="test5.url">
      <template slot="title">文件深度鉴定</template>
      <at-collapse-item-content
        v-for="(item, index) in test5.children"
        :key="index"
        :contenthref="test5.url"
        :content="item">
        {{item.info}}
      </at-collapse-item-content>
    </at-collapse-item>
    <at-collapse-item :num="test6.total" name="6" :morehref="test6.url">
      <template slot="title">下载</template>
      <at-collapse-item-content
        v-for="(item, index) in test6.children"
        :key="index"
        :contenthref="test6.url"
        :content="item">
        {{item.info}}
      </at-collapse-item-content>
    </at-collapse-item>
  </at-collapse>
  <hr><hr>
  <h2>collapse 展开折叠</h2>
  <at-button @click="show3 = !show3">Click Me</at-button>
    <div style="margin-top: 20px; height: 200px;">
      <at-collapse-transition>
        <div v-show="show3">
          <div class="transition-box">at-collapse-transition</div>
          <div class="transition-box">at-collapse-transition</div>
        </div>
      </at-collapse-transition>
    </div>
</div>
</template>

<script>
  export default {
    data() {
      return{
        show3: true,
        test1:{
          url:'/cascader',
          total:2,
          children:[
          {
            info:"内容1",
            list_id:2,
            task_id:12
          },
          {
            info:"内容2",
            list_id:2,
            task_id:12
          }
          ]
        },
        test2:{
          url:'/cascader',
          total:1,
          children:[
          {
            info:"内容1",
            list_id:2,
            task_id:12
          }
          ]
        },
        test3:{
          url:'',
          total:0,
          children:[]
        },
        test4:{
          url:'',
          total:0,
          children:[]
        },
        test5:{
          url:'',
          total:0,
          children:[]
        },
        test6:{
          url:'',
          total:0,
          children:[]
        }
      }
    }
  }
</script>
<style>
  .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
</style>
